<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        img {
            vertical-align: top;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        /* 小广告 */
        .adver-wrapper {
            width: 300px;
            /* height: 400px; */
            background-color: grey;
            position: fixed;
            right: 5px;
            bottom: 5px;
        }

        .adver-header {
            line-height: 32px;
            position: relative;
        }

        .adver-header .adver-tips {
            font-size: 12px;
            text-indent: 13px;
        }

        .adver-header .adver-close {
            position: absolute;
            right: 5px;
            top: 0;
        }

        .adver-main img {
            width: 100%;
        }

        /* 时钟 */
        #clock-box {
            /* 父元素宽度依靠子内容撑开 */
            /* display:linne-block  -> 改变元素性质 */
            width: fit-content;
            margin: 0 auto;
            text-align: center;
            padding: 10px;
        }

        #clock-box #clock-time {
            font-size: 40px;
            line-height: 50px;
            font-family: "clockIcon";
        }

        @font-face {
            font-family: "clockIcon";
            src: url('../font/clockicons.woff2');
        }
    </style>
</head>

<body>
    <!-- vue的根实例(所有组件的父(代)组件) -->
    <div id="app">
        <h3>组件prop测试</h3>

        <div>
            <p>
                {{count}}
            </p>
            <button @click="count++">点击</button>
            <button @click="isShow=!isShow">切换</button>
        </div>

        <hr>
        <prop-test :count="count" v-if="isShow"></prop-test>
    </div>
</body>
<template id="propTest">
    <div>
        <p><span>{{count}}</span></p>
        <p>
            <input type="text" v-model="msg">
        </p>
        <p>{{msg}}</p>
    </div>
</template>
<script>

    // function fn() {
    //     function a() {
    //         console.log(1);
    //     }
    //     a();
    //     function b() {
    //         console.log(2);
    //     }
    //     b();
    // }

    // fn();


    // 子组件什么时候初始化?   => 在父组件解析template为虚拟DOM是触发
    // 首先父组件先进行初始化,在将template编译为虚拟DOM时,会遇到子组件,触发子组件的初始化,此时父组件需要等待子组件初始化以及将子组件的template编译为虚拟dom,等子组件template解析完毕,父组件会继续向后解析,等待父组件template全部解析完毕, 将虚拟DOM挂载到真实DOM =>视图渲染 => 触发mounted方法,此时子组件的mounted方法先与父组件触发


    // 子组件什么时候会进入更新阶段?
    // 1. 父组件给子组件传递动态数据, 当父组件的数据更新时, 子组件接收的数据也会更新
    // 父组件给子组件传递动态数据, 当父组件的数据更新 => 将解析模板为虚拟DOM, 子组件接收的数据也会更新 => 将解析模板为虚拟DOM  =>  diff算法,计算出最优解 => 渲染视图 => 触发updated钩子函数,此时子组件的updated方法先与父组件触发

    // 2. 子组件自身绑定的数据发生改变 => 子组件也会更新

    // 子组件什么时候会进入销毁阶段?
    // 

    Vue.component("prop-test", {
        inheritAttrs: false,
        props: {
            count: Number
        },
        data() {
            return {
                msg: ""
            }
        },
        template: "#propTest",
        // beforeCreate() {
        //     console.log("1. beforeCreate 子组件");
        // },
        // created() {
        //     console.log("2. created 子组件");
        // },
        // beforeMount() {
        //     console.log("3. beforeMount 子组件");
        // },
        // mounted() {
        //     console.log("4. mounted 子组件");
        // },

        beforeUpdate() {
            console.log("5. beforeUpdate 子组件");
        },
        updated() {
            console.log("6. updated 子组件");
        },
    })

    var vm = new Vue({
        el: "#app",
        data: {
            count: 1,
            isShow: true,
        },
        // beforeCreate() {
        //     console.log("1. beforeCreate 父组件");
        // },
        // created() {
        //     console.log("2. created 父组件");
        // },
        // beforeMount() {
        //     console.log("3. beforeMount 父组件");
        // },
        // mounted() {
        //     console.log("4. mounted 父组件");
        // },

        beforeUpdate() {
            console.log("5. beforeUpdate 父组件");
        },
        updated() {
            console.log("6. updated 父组件");
        },
    })







</script>

</html>